import React, { Component } from 'react'
import PropTypes from 'prop-types'

import styled from 'styled-components'

const ImageViewWrapper = styled.div`
   width: 100%;
   height: 100%;
   img {
     width: 100%;
     height: 100%;
     border-radius: ${props => props.round ? '50%' : ''};
   }
`;

export default class ImageView extends Component {
  static propTypes = {
    src: PropTypes.string,
    round: PropTypes.bool,
  }

  render() {
    const { src, round } = this.props;
    return (
      <ImageViewWrapper
        round={round}
        onClick={() => { this.onClickEvent() }} >
        <img src={src} alt="" />
      </ImageViewWrapper>
    )
  }

  // 属性表示法
  onClickEvent = () => {
    // 子父传参   回调  事件
    const { clickEvent } = this.props;
    clickEvent && clickEvent()
  }
}
